<template>
  <div class="ElectricQuantity">
    <div class="el-content">
      <!-- <div class="tig"></div> -->
      <div class="mater-wrap">
        <div  class="mater-name">{{obj.MaterialName}}</div>
        <!-- <div class="mater-sb">{{obj.MaterialCode}}</div> -->
      </div>
      <div style="margin-left:10px">
        <div class="jd-top-w">
          <div class="jd-top">
            <div class="count-w" :class="getStatusColor(obj.METERIALSTATUS)" style="margin-right:15px">{{obj.USEDWEIGHTSUM}}</div>
            <div :class="getStatusColor(obj.METERIALSTATUS)">{{getStatus(obj.METERIALSTATUS)}}</div>
            <div style="margin-left:8px">{{obj.PackageNumber}}</div>
          </div>
          <div class="mks3">{{obj.USEDWEIGHTSUM}}/{{obj.METERIALWEIGHT}}</div>
        </div>
        <div class="jd-bottom">
          <ElectricProgressBar :obj="obj" :max="obj.METERIALWEIGHT" :current="obj.USEDWEIGHTSUM"></ElectricProgressBar>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import ElectricProgressBar from './ElectricProgressBar'
  // METERIALSTATUS: "1"
  // METERIALWEIGHT: 100
  // MaterialCode: "DA003_DA09"
  // MaterialName: "物料A"
  // USEDWEIGHTSUM: 50
  export default {
    props: ["obj"],
    components: {
      ElectricProgressBar,
    },
    methods: {
      getStatusColor(val) {
        
        if (val == 0) {
          return "status3"
        }
        if (val == 1) {
          return "status1"
        }
        if (val == 2) {
          return "status2"
        }
      },
      getStatus(val) {
        
        if (val == 0) {
          return "缺料"
        }
        if (val == 1) {
          return "正常"
        }
        if (val == 2) {
          return "补料"
        }
      }
    },
  }

</script>

<style lang="scss">
  .ElectricQuantity {
    margin: 20px 5px 20px 20px;

    .el-content {
      display: flex;
      align-items: center;

      // justify-content: space-between;
      .mater-wrap {
        margin-top: 5px;
        margin-left: 10px;
        width: 60px;
        text-align: left;
          font-size: 12px;

        .mater-name {
          font-size: 11px !important;
          width:60px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #FFFFFF;
          
          word-wrap: break-word; 
          word-break: normal;
        }

        .mater-sb {
          margin-top: 5px;
          font-size: 11px;
          width: 50px;
          overflow: hidden;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #999999;
        }
      }

      .jd-top-w {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .jd-top {
        display: flex;
        align-items: center;
      }

      .jd-bottom {}

      .tig {
        width: 15px;
        height: 15px;
        background: #1DD27D;
        border-radius: 50%;
      }

      .count-w {
        width: 55px;
        height: 25px;
        background: #263E65;

        font-size: 16px;
        line-height: 25px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FF6D32;
        display: flex;
        justify-content: center;
      }

      .mks3 {
        color: #2F8DE4 !important;
        font-size: 12px;
      }

      .status1 {
        color: #1DD27D;
      }

      .status2 {
        color: #EBDB2C;
      }

      .status3 {
        color: #FF486F;
      }
    }
  }

</style>
